<template>
    <div>
      <el-table
        :data="tableData"
        key="id"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50"/>
        <el-table-column
          prop="filmName"
          label="电影名称"
          width="180">
        </el-table-column>
        <!-- 
          prop="filmName" -->
        <el-table-column
          label="图片"
          width="180">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl"/>
          </template>
        </el-table-column>
  
        <el-table-column
          prop="name"
          label="主演"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope">
            <button type="danger" @click="del(scope.row.id)">删除</button>
          </template>
        </el-table-column>
      </el-table>
     
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableData: [{
              id: '111',
              filmName: '涉过愤怒的海',
              imgUrl: 'https://pic.maizuo.com/usr/movie/2f2566dffd5955d0b960a9ac8946e59c.jpg?x-oss-process=image/quality,Q_70',
              name: '曹保平 黄渤 周迅',
            }, {
              id: '222',
              filmName: '再见,李可乐',
              imgUrl: 'https://pic.maizuo.com/usr/movie/420f90817e5208626a4df71a6688ea91.jpg?x-oss-process=image/quality,Q_70',
              name: '王小列 闫妮 谭松韵 吴京 蒋龙',
            },{
              id: '333',
              filmName: '热搜',
              imgUrl: 'https://pic.maizuo.com/usr/movie/f435948b55c66662a6ad2618b356f78f.jpg?x-oss-process=image/quality,Q_70',
              name: '忻钰坤 周冬雨 宋洋 袁弘 王皓',
            },{
              id: '444',
              filmName: '爆裂点',
              imgUrl: 'https://pic.maizuo.com/usr/movie/4dd8a45785615d193056767df008cd64.jpg?x-oss-process=image/quality,Q_70',
              name: '林超贤 张家辉 陈伟霆 梁洛施 谭俊彦',
            },{
              id: '555',
              filmName: '拿破仑',
              imgUrl: 'https://pic.maizuo.com/usr/movie/c3db5e0e5c9b8767dd42fbb49c2882f1.jpg?x-oss-process=image/quality,Q_70',
              name: '本·迈尔斯 凡妮莎·柯比 露德温·塞尼耶 雷德利·斯科特 杰昆·菲尼克斯',
            },{
              id: '666',
              filmName: '瞒天过海',
              imgUrl: 'https://pic.maizuo.com/usr/movie/e2cca01d8be2935a99b73a139f6e7a6a.jpg?x-oss-process=image/quality,Q_70',
              name: '陈卓 惠英红 尹正 许光汉',
            },{
              id: '777',
              filmName: '照明商店',
              imgUrl: 'https://pic.maizuo.com/usr/movie/4950166f50fbf0428115e5ffb01d9ed5.jpg?x-oss-process=image/quality,Q_70',
              name: '蔡靖 章若楠 白宇帆',
            },]
      }
    },
    methods:{
      getCityList(){
        this.$axios({
          headers: {
            'X-Host':'mall.film-ticket.film.list'
          },
          url: 'https://m.maizuo.com/gateway',
          method: 'get',
          params: {
            k:'8052489'
          }
        }).then(res => {
          this.cities = res.data.data.cities
        })
      }
    },
      fn(){
        console.log('hello，el');
      }
    }
  </script>
  
  <style>
  img{
    width: 100px;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    height: 800px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: 800px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  </style>